<template>
  <view :style="colorStyle">
    <view class="PromoterRank">
      <view class="redBg bg-color">
        <view class="header">
          <view class="rank acea-row row-bottom row-around">
            <view class="item one">
              <view class="pictrue">
                <image :src="userInfo.avatar"></image>
              </view>
            </view>
          </view>
          <view class="extension">
            <view class="item">
              <view class="num">{{
                Number(userInfo.brokerage_price) + Number(userInfo.brokerage_price_one) + Number(userInfo.brokerage_price_two) + Number(userInfo.brokerage_price_thr) || 0
              }}</view>
              <view class="text">余额</view>
            </view>
            <view class="item">
              <view class="num">{{ Number(userInfo.coupon) + Number(userInfo.coupon_one) + Number(userInfo.coupon_two) + Number(userInfo.coupon_thr) || 0 }}</view>
              <view class="text">卡券</view>
            </view>
          </view>
          <view class="nav acea-row row-center-wrapper">
            <view class="item" :class="active == 0 ? 'select' : ''" @click="switchTap(0)">
              <view class=""> 我的余额 </view>
              <view class="line-btn" :class="active == 0 ? 'line-sel' : ''"></view>
            </view>
            <view class="line"> </view>
            <view class="item" :class="active == 1 ? 'select' : ''" @click="switchTap(1)">
              <view class=""> 我的卡券 </view>
              <view class="line-btn" :class="active == 1 ? 'line-sel' : ''"></view>
            </view>
          </view>
        </view>
      </view>
      <view class="list" v-if="rankList.length">
        <view class="item acea-row row-between-wrapper" v-for="(item, index) in rankList" :key="index" @click="goList(index, item.title)">
          <view class="picTxt">
            <view class="text on line1">{{ item.title }}<text class="iconfont icon-youhuiquan2" v-if="active == 1" @click="openCoupon(index)"></text></view>
            <view class="text line1" v-if="active == 1 && item.time">截止时间：{{ item.time }}</view>
          </view>
          <view class="people font-color" v-if="active == 1" @click="openCoupon(index)">{{ item.count }}</view>
          <view class="people font-color" v-else>{{ item.count ? item.count : '0.00' }} 元</view>
          <view class="iconfont icon-xiangyou" v-if="active == 0"></view>
        </view>
      </view>
      <view v-else>
        <emptyPage title="暂无数据～"></emptyPage>
      </view>
    </view>
    <home v-if="navigation"></home>
    <couponWindow :window="window" :couponImage="couponImage" @onColse="onColse"></couponWindow>
  </view>
</template>

<script>
import { getRankList, getUserInfo } from '@/api/user.js'
import { toLogin } from '@/libs/login.js'
import emptyPage from '@/components/emptyPage.vue'
import { mapGetters } from 'vuex'
import home from '@/components/home'
import colors from '@/mixins/color.js'
import { HTTP_REQUEST_URL } from '@/config/app'
import couponWindow from '@/components/couponWindow/coupon.vue'
export default {
  components: {
    home,
    emptyPage,
    couponWindow
  },
  mixins: [colors],
  data() {
    return {
      navList: ['我的积分', '我的卡券'],
      active: 0,
      page: 1,
      limit: 20,
      type: 'week',
      loading: false,
      loadend: false,
      rankList: [],
      userInfo: {},
      isShowAuth: false,
      window: false,
      imgHost: HTTP_REQUEST_URL + '/statics/images/no-thing.png',
      couponImage: 'no-thing.png'
    }
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getRanklist()
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      this.rankList = []
      let obj = []
      this.getRanklist()
      this.getUserData()
    } else {
      toLogin()
    }
  },
  onShow() {
    uni.removeStorageSync('form_type_cart')
  },
  onPullDownRefresh() {
    // 下拉刷新时执行的逻辑
    this.page = 1 // 重置分页
    this.loadend = false // 重置加载结束标志
    this.rankList = [] // 清空当前列表数据
    this.getRanklist() // 重新获取列表数据
    this.getUserData() // 重新获取用户数据
    // 刷新完成后的反馈
    uni.stopPullDownRefresh() // 停止下拉刷新动画
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 2000
    })
  },
  methods: {
    openCoupon(e) {
      this.couponImage = `coupon${e}.jpg`
      console.log('>>>>', this.couponImage)
      this.window = true
    },
    onColse() {
      this.window = false
    },
    /**
     * 获取个人用户信息
     */
    getUserData: function () {
      let that = this
      getUserInfo()
        .then((res) => {
          console.log('>>>>>>>>>>获取个人用户信息', res.data)
          that.userInfo = res.data
        })
        .catch((err) => {
          console.log('>>>>>>>>>>获取个人用户信息错误', err)
        })
    },
    getRanklist: function () {
      let that = this
      if (that.loadend) return
      if (that.loading) return
      that.loading = true
      getRankList({
        page: that.page,
        limit: that.limit,
        type: that.type
      })
        .then((res) => {
          let list = res.data.list
          console.log('>>>>>>>>>>数据', list)
          that.rankList.push.apply(that.rankList, list)
          that.loadend = list.length < that.limit
          that.loading = false
          that.$set(that, 'rankList', that.rankList)
          that.page = that.page + 1
        })
        .catch((err) => {
          that.loading = false
        })
    },

    switchTap: function (index) {
      if (this.active === index) return
      this.active = index
      this.type = index ? 'month' : 'week'
      this.page = 1
      this.loadend = false
      this.$set(this, 'rankList', [])
      this.getRanklist()
    },

    goList: function (index, title) {
      if (this.active === 1) return
      uni.navigateTo({
        url: `/pages/users/user_spread_money/index?type=2&pid=${index}&title=${title}`
      })
    }
  },
  onReachBottom: function () {
    this.getRanklist()
  }
}
</script>

<style scoped lang="scss">
.PromoterRank .redBg {
  background-image: url('../static/ranking.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.PromoterRank .header {
  width: 100%;
  height: 378rpx;
  position: relative;
}

.PromoterRank .header {
  .extension {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    bottom: 90rpx;
    padding: 15rpx 0;
    color: #fff;

    .item {
      width: 100%;
      text-align: center;

      .num {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .text {
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
}

.PromoterRank .nav {
  width: 100%;
  height: 90rpx;
  background: rgba(0, 0, 0, 0.1);
  font-size: 30rpx;
  color: #fff;
  margin: 0 auto;
  position: absolute;
  bottom: 0;

  .line {
    width: 1px;
    height: 42rpx;
    background: #ffffff;
    opacity: 0.3;
  }

  .line-sel {
    width: 58rpx;
    height: 4rpx;
    background: #ffffff;
    border-radius: 4rpx;
    margin: 0 auto;
  }
}

.PromoterRank .nav .item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
  color: #f2f2f2;

  .line-btn {
    margin-top: 10rpx;
  }
}

.PromoterRank .nav .item.select {
  color: #fff;
  font-weight: bold;
}

.PromoterRank .header .rank {
  padding: 54rpx 0rpx;
}

.PromoterRank .header .rank .item .pictrue {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
}

.PromoterRank .header .rank .item .pictrue image {
  position: absolute;
  display: block;
  bottom: 2rpx;
  border-radius: 50%;
  left: 50%;
  margin-left: -50rpx;
}

.PromoterRank .header .rank .item.one .pictrue {
  width: 100rpx;
  height: 100rpx;
}

.PromoterRank .header .rank .item.one .pictrue image {
  width: 100rpx;
  height: 100rpx;
  margin-left: -50rpx;
  margin-top: 10rpx;
}

.time {
  padding: 34rpx 30rpx;
  color: #999999;
  background-color: #fff;
}

.PromoterRank .list {
  background-color: #fff;
  padding: 0 30rpx;
  .no {
    width: 52rpx;
    height: 52rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.PromoterRank .list .item {
  border-bottom: 1px solid #f3f3f3;
  font-size: 28rpx;
  padding: 30rpx 0;
}

.PromoterRank .list .item .num {
  color: #666;
  width: 52rpx;
  text-align: center;
}

.PromoterRank .list .item .picTxt {
  width: 350rpx;
}

.PromoterRank .list .item .picTxt .pictrue {
  width: 68rpx;
  height: 68rpx;
}

.PromoterRank .list .item .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.PromoterRank .list .item .picTxt .text {
  width: 350rpx;
  color: #333;
  &.on {
    font-size: 32rpx;
    text {
      margin-left: 10rpx;
      font-weight: 100;
    }
  }
}

.PromoterRank .list .item .people {
  width: 250rpx;
  text-align: right;
  font-size: 38rpx;
}
</style>
